@import play.twirl.api.Html
@(dataJson: String, title: String, context: String)
<style>
		#container {
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			position: absolute;
		}

</style>
<!DOCTYPE html>

<html lang="en">
	<head>
		<title>@title</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
		<script src="js/sigma.min.js" type="text/javascript"></script>
		<script src="js/shape-library.js" type="text/javascript"></script>
		<script src="js/sigma.renderers.customShapes.js" type="text/javascript"></script>
		<script src="js/sigma.utils.js" type="text/javascript"></script>

	</head>
	<body class="login">
		<div id="container"></div>
	</body>
	<script>
			$(function () {
				var defaultEdgeSize = 0.4
				var vizMode
				var defaultNodeColor = "#78B0FF"
				var highlightBorderColor = "#FF6700"
				var backgroundColor = "#f9f9f9"
				var content = "@context"
				var metabo_matched = content.split(",")

				var sigInst = new sigma({
					renderers: [
						{
							container: document.getElementById('container'),
							type: 'canvas'
						}
					],
					settings: {
						defaultLabelColor: 'black',
						defaultLabelSize: 12,
						defaultLabelBGColor: '#fff',
						defaultLabelHoverColor: '#000',
						labelThreshold: 6,
						defaultEdgeColor: 'default',
						doubleClickEnabled: false,
						minNodeSize: 1,
						maxNodeSize: 10,
						sideMargin: 1,
						minEdgeSize: defaultEdgeSize,
						maxEdgeSize: 1.4,
						defaultNodeBorder: 0
					}
				});

				var data=@Html(dataJson)

				for (var i = 0; i < data.nodes.length; i++) {
					var nd = data.nodes[i];
					if (vizMode === "network-full") {
						nd.size = 7;
					} else {
						nd.size = 5;
					}

					if ("pwp_id" in nd) {
						nd.x = parseInt(nd.x);
						nd.y = parseInt(nd.y);

						if (isNaN(nd.x)) {
							nd.x = 0;
						}
						if (isNaN(nd.y)) {
							nd.y = 0;
						}
						nd.color = "grey";
						nd.type = "square";
						nd.label = nd.name;
						nd.attr = {x: nd.x, y: nd.y, size: nd.size, color: nd.color, type: nd.type, label: nd.label};
						sigInst.graph.addNode(nd);
					} else {
						nd.x = parseInt(nd.x);
						nd.y = parseInt(nd.y);
						if (isNaN(nd.x)) {
							nd.x = 0;
						}
						if (isNaN(nd.y)) {
							nd.y = 0;
						}
						nd.color = defaultNodeColor;
						nd.label = nd.name;

						if (metabo_matched.indexOf(nd.hmdb_id) !== -1) {
							nd.borderColor = highlightBorderColor
							nd.size = nd.size + 1;
						} else {
							nd.size = nd.size - 1;
						}

						nd.attr = {
							x: nd.x, y: nd.y, size: nd.size, color: nd.color, label: nd.label
						};
						sigInst.graph.addNode(nd);
					}
				}

				var fake_nd = {
					id: 'mynode', hidden: true, x: 0, y: 0, size: 10, color: backgroundColor,
					attr: {x: 0, y: 0, size: 10, color: backgroundColor}
				};
				sigInst.graph.addNode(fake_nd);

				for (var j = 0; j < data.edges.length; j++) {
					var eg = data.edges[j];
					eg.size = defaultEdgeSize;
					eg.id = j.toString();
					eg.color = "grey";
					var lvl = 1;
					eg.attr = {color: eg.color, expr: lvl};
					sigInst.graph.addEdge(eg);
				}

				sigInst.refresh();
				sigma.misc.animation.camera(sigInst.camera, {
					x: 0,
					y: 0,
					ratio: 1.0
				}, {duration: 250});

			})

	</script>


</html>


